<template>
  <div class="headerWrapper">
      <span class="iconfont iconnew"></span>
      <div class="search" @click="$router.push('/search')">
          <span class="iconfont iconsearch"></span>
          搜索新闻
      </div>
      <span class="iconfont iconwode" @click="$router.push('/personal')"></span>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.headerWrapper {
    background-color: red;
    color: #fff;
    display: flex;
    align-items: center;
    padding: 0 10/360*100vw;
    .search {
        flex: 1;
        text-align: center;
        background: rgba(255, 255, 255, .4);
        height: 34/360*100vw;
        line-height: 34/360*100vw;
        margin: 0 20/360*100vw;
        border-radius: 17/360*100vw;
    }
    .iconnew {
        font-size: 54/360*100vw;
    }
    .iconwode {
        font-size: 32/360*100vw;
        opacity: .6;
    }
}
</style>